import React,{ Component } from 'react'
import {MineStyle,
    MineContainer,
    MineContainerTop,
    MineContainerMid,
    MineContainerFooter,
    MineLoginGrade,
    MineLoginTopHead,
    MineLoginPhoto,
    MineLoginName,
    MineLoginTopFooter,
    MineLoginTopContainer
} from  './MineStyle'

import BScroll from 'better-scroll'
 import cookie from '../../utils/cookie'
import {Toast} from 'antd-mobile'
const LoginFooterItem = (props) =>{
    return (
            <li>
                <a>
                    <i className={'fa '+props.icon}></i>
                    <span>{props.text}</span>  
                </a> 
            </li>
        
    )
}
const OtherItem=(props)=>{
        return (
            <div onClick={props.loginOut}>
               <i className={'fa '+props.icon}></i>
                <span>{props.text}</span>
                
                <em className="fa fa-angle-right"></em>
            </div>
        )
}
const MoneyItem=(props)=>{
    return (
        <div>
            <span>{props.text}</span>
        </div>
    )
}
const Item=(props)=>{
    return (
            <div>
                <i className={'fa '+props.icon}></i>
                <span>{props.text}</span>
            </div>
            )
}
class Mine extends Component{
constructor(){
    super()
    this.state={
        fn_tabs:[
            {
                id:1,
                text:'待付款',
                icon:'fa-credit-card'
            },
            {
                id:2,
                text:'待收货',
                icon:'fa-inbox'
            },
            {
                id:3,
                text:'待评价',
                icon:'fa-comment-o'
            },
            {
                id:4,
                text:'退货/退款',
                icon:'fa-undo'
            }
        ],
        money_tabs:[
            {
                id:1,
                text:'现金券'
            },
            {
                id:2,
                text:'红包'
            },
            {
                id:3,
                text:'聚美余额'
            },
            {
                id:4,
                text:'礼品卡'
            }
        ],
        other_tabs:[
            {
                id:1,
                text:'售后服务',
                icon:'fa-phone'
            },
            {
                id:2,
                text:'意见反馈',
                icon:'fa-envelope-open-o'
            },
            {
                id:3,
                text:'收货地址',
                icon:'fa-bus'
            },
            {
                id:4,
                text:'退出登录',
                icon:'fa-share',          
            },
            {
                id:5,
                text:'400-123-8888',
                icon:'fa-whatsapp'
            },
        ],
        LoginFlag:true,
        LoginFooter:[
            {
                id:1,
                text:'心愿单',
                icon:'fa-heart-o'
            }, {
                id:2,
                text:'开售提醒',
                icon:'fa-clock-o'
            }, {
                id:3,
                text:'收藏',
                icon:'fa-star-o'
            },
        ]
    }
}

renderItem(){
    return this.state.fn_tabs.map(item=><Item {...item} key={item.id}></Item>)
}
renderMoneyItem(){
    return this.state.money_tabs.map(item=><MoneyItem {...item} key={item.id}></MoneyItem>)
}
renderOtherItem(){
    return this.state.other_tabs.map((item,index)=><OtherItem {...item} key={item.id} 
        loginOut={()=>this.loginOut(index)}></OtherItem>)
}
renderLoginFooterItem(){
    return this.state.LoginFooter.map(item=><LoginFooterItem {...item} key={item.id}></LoginFooterItem>)
}
getUserName(){
    
    const ls_user = cookie.get('user')
  

        return  ls_user && JSON.parse(ls_user)[0].username ||''  
    
}

  
loginOut(index){
    if(index===3){
        const ls_user = cookie.get('user')
        if(ls_user){
            cookie.remove('user');
            this.props.history.push('/mine')
            document.location.reload()
        }else{     
            Toast.success('退出成功', 2);
        }     
        
    }  
}
componentDidMount(){
    this.bscroll = new BScroll(this.mineLoginContent,{
        click:true,
        mouseWheel: {
           speed: 20,
           invert: false,
           easeTime: 300
          }
       })
}  

    render () {
        return (
            <MineStyle ref={el=>this.mineLoginContent = el}>
                <MineContainer>
                <MineContainerTop>
                    <MineLoginTopHead>
                        <MineLoginTopContainer>
                            <MineLoginName>
                                {this.getUserName()&&this.getUserName()}
                            </MineLoginName>
                            <MineLoginGrade>
                                <span>普通会员</span>
                            </MineLoginGrade>
                        </MineLoginTopContainer>
                        <MineLoginPhoto>
                            <img src="http://p0.jmstatic.com/jmstore/user/icon/green_200_200.png?1563965941" alt="头像"></img>
                        </MineLoginPhoto>
                    </MineLoginTopHead>
                    < MineLoginTopFooter>
                            {this.renderLoginFooterItem()}
                    </ MineLoginTopFooter>
                </MineContainerTop>
                <MineContainerMid>
                    <div className="Mid-one">
                        <div className="Mid-one-top">
                            <i className="fa fa-calendar"></i>
                            <span className="order-list">我的订单</span>
                            <span className="look-list">查看我的全部订单<i className="fa fa-angle-right"></i></span>
                        </div>
                        <div className="Mid-one-bot">
                            {this.renderItem()}
                        </div>
                    </div>
                    <div className="Mid-two">
                        <div className="Mid-two-top">
                                <i className="fa fa-usd"></i>
                                <span className="order-list">我的资产</span>
                        </div>
                        <div className="Mid-two-bot">
                            {this.renderMoneyItem()}
                        </div>
                    </div>
                </MineContainerMid>
                <MineContainerFooter>
                    <div className="bot-top">
                        {this.renderOtherItem()}
                    </div>  
                    <div className="bot-bot">
                        <div className="bot-title">
                            <p>客服热线400-123-8888 (8:00-22:00)</p>
                            <p>拨打前请记录您的UID 0</p>
                        </div>
                        
                     </div>                 
                </MineContainerFooter>
            </MineContainer>
        </MineStyle>

        )
    }
}

export default Mine